<div id="deviceTimers" class="container js-device-timers">
	<div class="page-header-small page-header-with-button">
		<h1><span data-i18n="Timers">Timers</span>: {{ ::vm.itemName }}</h1>
        <div><a class="btnstyle3" back-button><i class="fa fa-reply" title="Back"></i>&nbsp;<span data-i18n="Back"></span></a></div>
	</div>

    <div id="tabs">
        <ul id="GridTable" class="nav nav-tabs sub-tabs" data-tabs="GridTable">
            <li class="active"><a data-target="#dz-timers-table" data-toggle="tab" data-i18n="Table">Table</a></li>
            <li>               <a data-target="#ts-planning"     data-toggle="tab" data-i18n="Grid">Grid</a></li>

        </ul>
        <div id="my-tab-content" class="tab-content">
            <div id="ts-planning" class="ts-planning tab-pane"></div>
            <div id="dz-timers-table" class="tab-pane active">
                <timers-table ng-if="::vm.isLoaded"
                              timer-settings="vm.timerSettings"
                              timers="vm.timers"
                              selected-timer-idx="vm.selectedTimerIdx"
                              level-options="::vm.levelOptions"
                              is-Blind="::vm.isBlind"
                              is-setpoint-timers="::vm.isSetpointTimers">
                </timers-table>

                <div class="page-content-container">
                    <timer-form ng-if="::vm.isLoaded"
                                timer-settings="vm.timerSettings"
                                level-options="::vm.levelOptions"
                                is-Blind="::vm.isBlind"
                                color-settings-type="::vm.colorSettingsType"
                                is-command-selection-disabled="::vm.isCommandSelectionDisabled"
                                is-setpoint-timers="::vm.isSetpointTimers">
                    </timer-form>

                    <table id="updelclr" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td style="padding: 3px 10px; width: 160px;">&nbsp;</td>
                            <td style="padding: 3px 10px;">
                                <button class="btnstyle3" data-i18n="Add" ng-click="vm.addTimer()"></button>
                                <button class="btnstyle3" data-i18n="Update" ng-click="vm.updateTimer(vm.selectedTimerIdx)" ng-disabled="!vm.selectedTimerIdx"></button>
                                <button class="btnstyle3" data-i18n="Delete" ng-click="vm.deleteTimer(vm.selectedTimerIdx)" ng-disabled="!vm.selectedTimerIdx"></button>
                            </td>
                            <td align="right" style="padding-right: 10px;">
                                <button class="btnstyle3" data-i18n="Clear" ng-click="vm.clearTimers()"></button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <script type="text/ng-template" id="views/timers/timersTable.html">
            <table class="display" border="0" cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th width="40" align="center"></th>
                        <th width="150" align="center"></th>
                        <th width="80" align="center"></th>
                        <th width="60" align="center"></th>
                        <th width="60" align="center"></th>
                        <th width="60" align="center"></th>
                        <th width="140" align="center"></th>
                        <th align="left"></th>
                    </tr>
                </thead>
            </table>
        </script>

        <script type="text/ng-template" id="views/timers/timerForm.html">
            <table class="display settings-form" id="timerparamstable">
                <tr>
                    <td style="vertical-align: top; width: 160px;">
                        <label data-i18n="Today"></label>
                    </td>
                    <td>
                        <timesun></timesun>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="enabled" data-i18n="Enabled"></label>:
                    </td>
                    <td>
                        <input type="checkbox" id="enabled" ng-model="vm.timerSettings.active">
                        <label for="enabled"></label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="combotype" data-i18n="Type"></label>:
                    </td>
                    <td>
                        <select id="combotype"
                                style="width:180px"
                                class="combobox ui-corner-all"
                                ng-model="vm.timerSettings.timertype"
                                ng-options="item.value as item.label for item in ::vm.typeOptions">
                        </select>
                    </td>
                </tr>
                <tr ng-show="vm.isDateVisible()">
                    <td>
                        <label for="sdate" data-i18n="Date"></label>:
                    </td>
                    <td>
                        <input id="sdate"
                               type="text"
                               style="width: 100px; padding: .2em;"
                               class="text ui-widget-content ui-corner-all"
                               autocomplete="off"
                               ng-model="vm.timerSettings.date">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="combotimehour" data-i18n="Time"></label>:
                    </td>
                    <td>
                        <select id="combotimehour" style="width:50px" class="combobox ui-corner-all"
                                ng-model="vm.timerSettings.hour"
                                ng-options="item.value as item.label for item in ::vm.hourOptions">
                        </select>
                        :
                        <select id="combotimemin" style="width:50px" class="combobox ui-corner-all"
                                ng-model="vm.timerSettings.min"
                                ng-options="item.value as item.label for item in ::vm.minuteOptions">
                        </select>

                        <span data-i18n="(hour/minute)"></span>
                    </td>
                </tr>
                <tr ng-hide="::vm.isSetpointTimers">
                    <td>
                        <label for="randomness" data-i18n="Randomness"></label>:
                    </td>
                    <td>
                        <input id="randomness" type="checkbox" ng-model="vm.timerSettings.randomness">
                        <label for="randomness"></label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="persistent" data-i18n="Persistent"></label>:
                    </td>
                    <td>
                        <input id="persistent" type="checkbox" ng-model="vm.timerSettings.persistent">
                        <label for="persistent"></label>
                    </td>
                </tr>
                <tr ng-hide="::vm.isSetpointTimers || vm.isCommandSelectionDisabled">
                    <td>
                        <label for="combocommand" data-i18n="Command"></label>:
                    </td>
                    <td ng-hide="::vm.isBlind">
                        <select id="combocommand"
                                class="combobox ui-corner-all"
                                style="width:90px"
                                ng-disabled="vm.isCommandSelectionDisabled" ng-model="vm.timerSettings.command"
                                ng-options="item.value as item.label for item in ::vm.commandOptions">
                        </select>
                    </td>
                    <td ng-show="::vm.isBlind">
                        <select id="combocommand"
                                class="combobox ui-corner-all"
                                style="width:90px"
                                ng-disabled="vm.isCommandSelectionDisabled" ng-model="vm.timerSettings.command"
                                ng-options="item.value as item.label for item in ::vm.blindOptions">
                        </select>
                    </td>
                </tr>
                <tr ng-show="::vm.isSetpointTimers">
                    <td>
                        <label for="tvalue" data-i18n="Value"></label>:
                    </td>
                    <td>
                        <input type="text" id="tvalue" style="width: 60px; padding: .2em;"
                               class="text ui-widget-content ui-corner-all"
                               ng-model="vm.timerSettings.tvalue">&nbsp;
                               <label for="tvalue">{{vm.timerSettings.vunit}}</label>
                               
                    </td>
                </tr>

                <tr ng-show="vm.isLevelVisible()">
                    <td>
                        <label for="combolevel">
                            <span ng-show="::!vm.isSelector" data-i18n="Level"></span>
                            <span ng-show="::vm.isSelector" data-i18n="Level name"></span>:
                        </label>
                    </td>
                    <td>
                        <select id="combolevel" style="min-width:70px" class="combobox ui-corner-all"
                                ng-model="vm.timerSettings.level"
                                ng-options="item.value as item.label for item in vm.levelOptions">
                        </select>
                    </td>
                </tr>

                <tr ng-if="::vm.isColorSettingsAvailable">
                    <td>
                        <label data-i18n="Color"></label>:
                    </td>
                    <td>
                        <rgbw-picker color="vm.timerSettings.color"
                                     level="vm.timerSettings.level"
                                     color-settings-type="vm.colorSettingsType"
                                     dimmer-type="vm.dimmerType"
                                     max-dimmer-level="100"></rgbw-picker>
                    </td>
                </tr>

                <tr ng-show="vm.isDayScheduleVisible()">
                    <td></td>
                </tr>

                <tr ng-show="vm.isDayScheduleVisible()">
                    <td>
                        <label data-i18n="When"></label>:
                    </td>
                    <td>
                        <input id="when_1" type="radio" name="when" value="Everyday" ng-model="vm.week.type">&nbsp;
                        <label for="when_1" data-i18n="Everyday"></label>
                        <br>
                        <br>
                        <input id="when_2" type="radio" name="when" value="Weekdays" ng-model="vm.week.type">&nbsp;
                        <label for="when_2" data-i18n="Weekdays"></label>
                        <br>
                        <br>
                        <input id="when_3" type="radio" name="when" value="Weekends" ng-model="vm.week.type">&nbsp;
                        <label for="when_3" data-i18n="Weekends"></label>
                        <br>
                        <br>
                        <input id="when_4" type="radio" name="when" value="SelectedDays" ng-model="vm.week.type">&nbsp;
                        <label for="when_4" data-i18n="Selected Days"></label>
                        <br>
                        <br>
                    </td>
                </tr>
                <tr ng-show="vm.isDayScheduleVisible()">
                    <td></td>
                </tr>
                <tr ng-show="vm.isDayScheduleVisible()">
                    <td>
                        <label data-i18n="Days"></label>:
                    </td>
                    <td>
                        <input type="checkbox" id="ChkMon"
                               ng-disabled="!vm.isDaySelectonAvailable()"
                               ng-model="vm.week.days.mon">&nbsp;
                        <label for="ChkMon" data-i18n="Monday"></label>
                        <br>
                        <input type="checkbox" id="ChkTue"
                               ng-disabled="!vm.isDaySelectonAvailable()"
                               ng-model="vm.week.days.tue">&nbsp;
                        <label for="ChkTue" data-i18n="Tuesday"></label>
                        <br>
                        <input type="checkbox" id="ChkWed"
                               ng-disabled="!vm.isDaySelectonAvailable()"
                               ng-model="vm.week.days.wed">&nbsp;
                        <label for="ChkWed" data-i18n="Wednesday"></label>
                        <br>
                        <input type="checkbox" id="ChkThu"
                               ng-disabled="!vm.isDaySelectonAvailable()"
                               ng-model="vm.week.days.thu">&nbsp;
                        <label for="ChkThu" data-i18n="Thursday"></label>
                        <br>
                        <input type="checkbox" id="ChkFri"
                               ng-disabled="!vm.isDaySelectonAvailable()"
                               ng-model="vm.week.days.fri">&nbsp;
                        <label for="ChkFri" data-i18n="Friday"></label>
                        <br>
                        <input type="checkbox" id="ChkSat"
                               ng-disabled="!vm.isDaySelectonAvailable()"
                               ng-model="vm.week.days.sat">&nbsp;
                        <label for="ChkSat" data-i18n="Saturday"></label>
                        <br>
                        <input type="checkbox" id="ChkSun"
                               ng-disabled="!vm.isDaySelectonAvailable()"
                               ng-model="vm.week.days.sun">&nbsp;
                        <label for="ChkSun" data-i18n="Sunday"></label>
                    </td>
                </tr>
                <tr ng-show="vm.isRDaysVisible()">
                    <td></td>
                </tr>
                <tr ng-show="vm.isRDaysVisible()">
                    <td>
                        <label for="days" data-i18n="Day"></label>:
                    </td>
                    <td>
                        <select id="days"
                                class="combobox ui-corner-all"
                                style="width:50px"
                                ng-model="vm.timerSettings.mday"
                                ng-options="item.value as item.label for item in ::vm.dayOptions">
                        </select>
                    </td>
                </tr>
                <tr ng-show="vm.isROccurenceVisible()">
                    <td></td>
                </tr>
                <tr ng-show="vm.isROccurenceVisible()">
                    <td>
                        <label for="occurence" data-i18n="Day"></label>:
                    </td>
                    <td>
                        <select id="occurence"
                                class="combobox ui-corner-all"
                                style="width:90px"
                                ng-model="vm.timerSettings.occurence"
                                ng-options="item.value as item.label for item in ::vm.occurenceOptions">
                        </select>

                        <select id="weekdays"
                                class="combobox ui-corner-all"
                                style="width:100px"
                                ng-model="vm.timerSettings.weekday"
                                ng-options="item.value as item.label for item in ::vm.weekdayOptions">
                        </select>
                    </td>
                </tr>
                <tr ng-show="vm.isRMonthsVisible()">
                    <td></td>
                </tr>
                <tr ng-show="vm.isRMonthsVisible()">
                    <td>
                        <label for="months" data-i18n="Month"></label>:
                    </td>
                    <td>
                        <select id="months"
                                class="combobox ui-corner-all"
                                style="width:90px"
                                ng-model="vm.timerSettings.month"
                                ng-options="item.value as item.label for item in ::vm.monthOptions">
                        </select>
                    </td>
                </tr>
            </table>
        </script>
    </div>
    </div>
</div>
